<template>

  <el-aside :width="`${sizeWidth2}px`" style="background-color: rgb(238, 241, 246);">
    <el-menu :default-openeds="['1']" style="height:100%;overflow-x:hidden; "
    mode="vertical"
    background-color="rgb(48,65,86)"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse-transition="true"
    :collapse="isCollapse"
    class="el-menu-vertical"
    >

      <div style="height: 60px; line-height: 60px;text-align: center">
        <i class="el-icon-s-home" :style="`color:white;padding-right:${menuNameIcon}px`"></i>
          <b style="color:white" v-show="!isCollapse">{{menuName}}</b>
      </div>
      <el-submenu index="1">
        <template slot="title">
         <i class="el-icon-menu"></i>
          <span slot="title">菜单栏</span>
          </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="pushShowLo()">首页</el-menu-item>
          <el-menu-item index="1-2" @click="pushShowChart()"  v-if="showModule" >数据图表展现</el-menu-item>
          <el-menu-item index="1-3" @click="pushShowAdmin()" v-if="showModule">管理员管理模块</el-menu-item>
          <el-menu-item index="1-4" @click="pushShowDorm()" v-if="showModule">宿舍管理模块</el-menu-item>
          <el-menu-item index="1-5" @click="pushShowStudent()" v-if="showModule">学生管理模块</el-menu-item>
          <el-menu-item index="1-6" @click="pushShowEmp()" v-if="showModule">员工管理模块</el-menu-item>
          <el-menu-item index="1-7" @click="pushShowMaintenance()">报修管理模块</el-menu-item>
          <el-menu-item index="1-8" @click="pushShowLate()" v-if="showModule" >晚归管理模块</el-menu-item>
          <el-menu-item index="1-9" @click="pushShowRepair()"  >维修管理模块</el-menu-item>
          <el-menu-item index="1-10" @click="pushShowRole()" v-if="showModule">权限管理模块</el-menu-item>
          <el-menu-item index="1-11" @click="pushShowVisit()" v-if="showModule">来访人员管理模块</el-menu-item>
          <el-menu-item index="1-12" @click="pushShowZhu()" >住宿管理模块</el-menu-item>
        </el-menu-item-group>
        <!-- <el-menu-item-group title="分组2"> -->
          
        <!-- <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i><span slot="title">导航二</span></template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu> -->
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
import {mapState} from 'vuex'
export default {
    name:'Aside',
    data(){
      return {
          sizeWidth2:this.sizeWidth
      }
    },
    // vuex一定要computed去读
    computed:{
       showModule(){
         return sessionStorage.getItem('rid')==='1'?true:false
       },
       isCollapse(){
         return this.$store.state.HeaderData.isCollapse
       },
       sizeWidth(){
         return this.$store.state.HeaderData.sizeWidth
       },
       menuName(){
          return this.$store.state.HeaderData.menuName
       },
      menuNameIcon(){
          return this.$store.state.HeaderData.menuNameIcon
      }
    },
    
    methods:{
      getsizeWidth(){
        // console.log(this)
      },
      //去根目录
      pushShowLo(){
        this.$router.push({
					name:'home'
        });
        this.$bus.$emit('ControlHomeSpan',true);
      },
      //去Main
      pushShowStudent(){
        // console.log(this.$router)
        this.$router.push({
					name:'Student'
        });
        this.$bus.$emit('ControlHomeSpan',false);
      },
      //去Chart界面
      pushShowChart(){
        this.$router.push({
					name:'chart'
        });
        this.$bus.$emit('ControlHomeSpan',false);
      },
      //去管理员管理模块
      pushShowAdmin(){
        // console.log(this.$router)
        this.$router.push({
					name:'admin'
        });
        this.$bus.$emit('ControlHomeSpan',false);
      },
      //去宿舍管理界面
      pushShowDorm(){
        this.$router.push({
					name:'dorm'
        });
        this.$bus.$emit('ControlHomeSpan',false);
      },
      //去员工管理界面
      pushShowEmp(){
        this.$router.push({
					name:'emp'
        });
        this.$bus.$emit('ControlHomeSpan',false);
      },
      //去报修管理界面
      pushShowMaintenance(){
        this.$router.push({
					name:'maintenance'
        });
        this.$bus.$emit('ControlHomeSpan',false);
      },
      //去晚归人员管理界面
      pushShowLate(){
        this.$router.push({
					name:'late'
        });
        this.$bus.$emit('ControlHomeSpan',false);
      },
      //去维修管理界面
      pushShowRepair(){
        this.$router.push({
					name:'repair'
        });
        this.$bus.$emit('ControlHomeSpan',false);
      },
      //去权限管理界面
      pushShowRole(){
        this.$router.push({
					name:'role'
        });
        this.$bus.$emit('ControlHomeSpan',false);
      },
      //去来访人员管理界面
      pushShowVisit(){
        this.$router.push({
					name:'visit'
        });
        this.$bus.$emit('ControlHomeSpan',false);
      },
      //去住宿管理界面
      pushShowZhu(){
        this.$router.push({
					name:'zhu'
        });
        this.$bus.$emit('ControlHomeSpan',false);
      }
      

    },
    mounted(){
      // console.log(this.isCollapse);
      // console.log(this.sizeWidth);
      // console.log(this.menuName);
      // console.log(this.menuNameIcon);
    },
   
}
</script>

<style>

.el-aside {
  color: #333;
}
</style>